<!-- 可编辑单元格组件 -->
<template>
    <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
            <div v-if="col=='bomName'|| col=='processRouteName' || col == 'warehouseName' 
                || col == 'name' || col == 'teamName' || col=='pickingProcedureName' || col == 'currencyName'
                || col=='processRouteDetal'|| col=='officeId' || col == 'crmName' || col== 'vendorName' 
                || col == 'inventoryCategoryName' || col == 'procedureName' || col == 'invoiceTypeName' || col == 'settleName'
                || col == 'bankName' || col == 'bankAccount' || col == 'workerName'">

                <!--bom版本、工艺路线、仓库 ,操作工姓名,明细工序,发票类型-->
                <searchGroupDetail ref="searchComponents" :record="record" :inputValue="value" :componentName="componentName" @clickItem="searchBackData">
                </searchGroupDetail>
            </div>

            <!-- <a-input-number  v-model:value="value" :min="1" :max="10" /> --> 
            <a-input v-else :value="value" ref="focusid" @input="handleInput" @change="handleChange" @pressEnter="check" @blur="check" />
        </div> 
        <!--物料编码-->
        <div v-else-if="editSearchtable" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="focusSearchid" @keyup="archivesData" @pressEnter="archivesEnter" />
                <searchCheckBoxArchives :checkType="defaultCheckType || checkType" ref="searchRef" @check="archivesCheck"></searchCheckBoxArchives>
            </div>
        </div>

        <!--项目-->
        <div v-else-if="editSearchProject" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="projectSearchid" @input="projectData" @pressEnter="projectEnter" />
                <projectSearch ref="projectSearchRef" @check="projectCheck"></projectSearch>
            </div>
        </div>

        <!--仓库-->
        <!-- <div v-else-if="editSearchWarehouse" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" ref="warehouseSearchid" @input="warehouseData" @pressEnter="warehouseEnter" />
                <searchWarehouse ref="warehouseSearchRef" @check="warehouseCheck"></searchWarehouse>
            </div>
        </div> -->

        <!--客户-->
        <!-- <div v-else-if="editcrmNameSearch" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" ref="crmNameSearchid" @input="crmnameData" @pressEnter="crmnameEnter" />
                <crmNameSearch ref="crmNameSearchRef" @check="crmnameCheck"></crmNameSearch>
            </div>
        </div> -->

        <!--车间，部门-->
        <div v-else-if="editofficeSearch" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="officeSearchid" @input="officeData" @pressEnter="officeEnter" @focus="showModal"/>
                <searchOffice ref="officeSearchRef" @check="officeCheck"></searchOffice>
            </div>
        </div>

        <!--货位-->
        <div v-else-if="editSearchLocation" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="locationSearchid" @keyup="locationData" @pressEnter="locationEnter" />
                <searchLocation ref="locationSearchRef" @check="locationCheck"></searchLocation>
            </div>
        </div>

        <!--工序-->
        <div v-else-if="editSearchProcedure" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="searchProcedureRef" @input="procedureData" @pressEnter="procedureEnter" />
                <searchProcedure ref="procedureSearchRef" @check="procedureCheck"></searchProcedure>
            </div>
        </div>

        <!--班组-->
        <div v-else-if="editSearchTeam" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="searchTeamRef" @input="TeamData" @pressEnter="TeamEnter" />
                <searchTeam ref="TeamSearchRef" @check="TeamCheck"></searchTeam>
            </div>
        </div>

        <!--生产线-->
        <div v-else-if="editSearchProductionLine" class="editable-cell-input-search">
            <div id="archiveBox">
                <div id="closesModel"></div>
                <a-input :value="value" placeholder="可搜索查询" ref="searchProductionLineRef" @input="ProductionLineData" @pressEnter="ProductionLineEnter" />
                <searchProductionLine ref="ProductionLineSearchRef" @check="ProductionLineCheck"></searchProductionLine>
            </div>
        </div>

        <!-- 辅助计量 -->
        <div v-else-if="editSubunitTable">
            <!--多计量-->
            <a-select ref="unitRef" :value="record.subUnit_temp_id" placeholder="请选择辅助计量" @change=" value => unitsChange(value)" @focus="unitsFocus" @blur="unitsBlur">
                <a-select-option v-for="(key,index) in unitsAssistSelect" :key="index" :value="key.id">
                    {{key.name}}
                </a-select-option>
            </a-select>
        </div>
        <!-- 辅计量数量 -->
        <div v-else-if="editSubunitNumber">
            <a-input :value="value" ref="unitNumRef" @pressEnter="unitNumBlur" @blur="unitNumBlur" />
        </div>

        <!-- 日期-->
        <div v-else-if="editRequireDate">
            <div id="closesModel"></div>
            <a-date-picker style="z-index:2" :value="value" :disabled-date="disabledDate" :open="true" ref="requireDateRef" @change="onChangeTime" @ok="onOkTime" @blur="onBlurTime" :default-value="moment()" format="YYYY-MM-DD" show-time />
        </div>

        <!-- 时间 hh-mm-ss 参数决定时间格式 -->
        <div v-else-if="editRequireTime">
            <div id="closesModel" @click="editRequireTime=false"></div>
            <a-time-picker ref="requireTimeRef" :open="true" :value="value?moment(value,'HH:mm'):null" @change="onChange1" format="HH:mm">
                <a-button slot="addon" size="small" type="primary" @click="handleClose">
                    确定
                </a-button>
            </a-time-picker>
        </div>

        <!--下拉选择-->
        <div v-else-if="editDropDownChoice">
            <a-select placeholder="请选择" @change="value=>dropDownChange(value)" @focus="dropDownFocus" @blur="dropDownBlur">
                <a-select-option v-for="(key,index) in valSelect" :key="index" :value="key.key">
                    {{key.label}}
                </a-select-option>
            </a-select>
        </div>

        <!--下拉多选-->
        <div v-else-if="editDropDownMuch">
            <a-select mode="tags" ref="dropMuch" placeholder="请选择" v-model="value" @change="value=>dropDownMuch(value)" @blur="dropDownMuchBlur">
                <a-select-option v-for="(key,index) in valSelect" :key="key">
                    {{key}}
                </a-select-option>
            </a-select>
        </div>

        <!--复选-->
        <div v-else-if="editCheckbox">
            <a-checkbox :checked="value=='是'?true:false" @change="onChangeCheckbox" @blur="checkboxBlur">
                是
            </a-checkbox>
        </div>

        <!-- 换算率 -->
        <div v-else-if="editExchangeRate">
            <a-input :value="value" :open="true" ref="exchangeRateRef" @change="onInputExchange" @pressEnter="enterExchange" @blur="enterExchange" />
        </div>

        <div v-else class="editable-cell-text-wrapper" @click="edit">
            
            <div v-if="col=='sourceVoucherType'">{{conversionOrderName(value)}}</div>
            <div v-if="col=='commodityAttribute' && value">
                <!--商品属性-->
                <div class="attribute-class">
                    <a-popover title="商品属性" trigger="click">
                        <template slot="content">
                            <div v-for="item in JSON.parse(value)" :key="item">
                                {{item.key}}:{{item.value}}
                            </div>
                        </template>
                        <span v-for="item in JSON.parse(value)" :key="item">
                            {{item.key}}:{{item.value}}&nbsp;/&nbsp;
                        </span>
                    </a-popover>
                </div>
            </div>
            <div v-else>
                <div :style="{'text-align':(col=='plannedQuantity' || col=='lossRate'?'center':'right')}" style="padding-right:2px;" v-if="(value || value == 0) && (
                    col=='amount'||col=='baseQuantity' || 
                    col=='price' || col=='tax' ||
                    col == 'includeTaxPrice' || col == 'includeTaxAmount' ||  col == 'taxAmount' ||
                    col == 'taxRate' || col == 'priceStandardName' || col=='priceTaxTotal' ||
                    col=='subQuantity' || col=='unitExchangeRate' || col == 'scrapQuantity' || 
                    col =='foreignAmount' || col =='foreignTax' || col == 'reworkQuantity' ||
                    col == 'unqualifiedQuantity' || col == 'returnUpdateQuantity' || col == 'qualifiedQuantity' ||
                    col == 'returnQuantity' || col == 'finishQuantity' || col == 'totalQuantity' ||
                    col =='plannedQuantity' ||col =='lossRate' || col == 'estimatedPrice' || col == 'estimatedAmount' || 
                    col == 'orgBaseQuantity' || col == 'orgSubQuantity' || col == 'shouldAmount' || col == 'workerWages' || 
                    col == 'quantity' || col == 'length' || col == 'width' || col=='contractQuantity' || col == 'unitPrice' ||
                    col == 'unitArea' ||  col == 'totalArea' || col == 'qualifiedPrice' || col == 'unqualifiedPrice' || 
                    col == 'reworkPrice' || col == 'scrapPrice' || col == 'workHourPrice'
                    )">
                    <span v-if="value==0">0.00</span>
                    <span v-else>{{value | NumFormat}}</span>
                </div>
                <div style="text-align:center;" v-else-if="value && (col=='deliveryDate')">{{ value || '&nbsp;' }}</div>
                <div style="text-align:center;" v-else-if="value && (col=='procedureFlag')">{{value | FlagFormat("procedureFlag")}}</div>
                <div :style="{'text-align':(col=='name'?'center':'')}" style="padding-left:2px" v-else>{{ value || '&nbsp;' }}</div>
            </div>
            <!-- <a-icon type="edit" class="editable-cell-icon" @dblclick="edit" /> -->
        </div>
    </div>
</template>
<script>
import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail";  //静态表格明细搜索组

import { searchCheckBoxArchives, projectSearch, searchWarehouse, searchLocation, crmNameSearch, searchProcedure, searchProductionLine, searchTeam, searchOffice } from "@/components/PopUpLayer";//各种搜索选择弹窗
import getDate from "@/utils/tool/date";
import moment from "moment";
import { conversionOrderName } from "@/utils/tool/parametric-switch"
let selectMap = new Map();
export default {
    components: {
        searchGroupDetail,

        searchCheckBoxArchives,
        projectSearch,
        searchWarehouse,
        searchLocation,
        crmNameSearch,
        searchProcedure,
        searchProductionLine,
        searchTeam,
        searchOffice,
    },
    props: {
        text: String,
        col: {
            type: String,
            default: ''
        },
        index: Number,
        dataSource: {
            type: Object,
            default: () => { }
        },
        unitsDataDetails: {
            type: Object,
            default: () => { }
        },
        unitsAssistSelect: {
            type: Object,
            default: () => { }
        },
        record: {
            type: Object,
            default: () => { }
        },
        //动态字段集合
        dynamicAllData: {
            type: Array,
            default: () => []
        },
        //物料类型
        checkType: {
            type: String,
            derault: ''
        },
        productCheckType: {
            type: String,
            derault: ''
        },
        showTotal: {
            type: Boolean, //是否需要对合计限制
            default: false
        },
        sourceCode: {
            type: String,
            default: ''
        },
        dynamicFormDataMap:{
            type: Map,
            default: () => new Map()
        }
    },
    data () {
        return {
            value: this.text,
            timeVal: null,
            editable: false,

            editSearchtable: false,     //物料编码

            setTime: 1,                 //物料延迟搜索ID
            editSearchProject: false,   //项目
            editSearchWarehouse: false, //仓库
            editSearchLocation: false,  //货位   
            editcrmNameSearch: false,    //供应商
            editSearchProcedure: false,  //工序
            editSearchTeam: false,       //班组
            editSearchProductionLine: false, //生产线
            editofficeSearch: false,//车间，部门


            editRequireDate: false,//日期

            editRequireTime: false,//时间

            editDropDownChoice: false,//下拉选择

            editDropDownMuch: false,//下拉多选

            editSubunitTable: false,//辅助计量

            editExchangeRate: false,//换算率

            editSubunitNumber: false,//辅助计量数量

            editCheckbox: false,//复选


            subUnitData: [],        //选中的辅计量数据

            unitsconvertType: null,  //详细计量是否是浮动     

            unitId: null,

            numReg: /^[0-9][0-9]*(\.[0-9]{1,4})?$/,//整数或者1-4位小数
            numRegTemp: /^([-+])?\d+(\.[0-9]{1,4})?$/, //负数或者整数或者1-4位小数
            //----------↓运算----------
            numberA: "",
            numberB: "",
            operational: ['+', '-', '*', '/'],
            recordNumber: "",
            nowOperational: [], //当前运算符数组
            numberEnd: null,    //如果输入有误返回的值
            //----------↑运算----------

            columnType: '',     //当前字段显示类型
            valSelect: '',       //下拉选择的值
            decimalData: [],     //小数结合

            searchVal: '',//搜索选择的val
            componentName: '',      //组件名

            tempvalue: '',
            defaultCheckType: null,
            routePath: this.$route.path,

        };
    },
    mounted () {
        // document.addEventListener('click', (e) => {

        //     //获取弹出表格对象
        //     if (this.col != 'inventoryCode' && this.col != 'projectName') {
        //         const userCon = document.getElementById('archiveBox');
        //         console.log(e.target.id);
        //         //判断表格对象中是否包含点击对象
        //         if(e.target.id != "archiveBox"){
        //             this.editSearchtable = false;
        //             this.editSearchProject = false;
        //             this.editSearchWarehouse = false;
        //             this.editSearchLocation = false;
        //             this.editcrmNameSearch = false;
        //         }
        //         // if (userCon && !userCon.contains(e.target)) {
        //         //     this.editSearchtable = false;
        //         //     this.editSearchProject = false;
        //         //     this.editSearchWarehouse = false;
        //         //     this.editSearchLocation = false;
        //         //     this.editcrmNameSearch = false;
        //         // }
        //     }
        // })
    },
    filters: {
        FlagFormat (id, code) {
            let item = selectMap.get(code);
            if (!item) return;
            let label = '';
            let val = JSON.parse(item.val);
            val.forEach(element => {
                if (id == element.key) {
                    label = element.label;
                }
            });
            return label;
        }
    },
    created () {
        let map = new Map();
        this.dynamicAllData.forEach(item => {
            if (item.columnType == '下拉') {
                map.set(item.code, item);
            }
        });
        selectMap = map;
    },
    methods: {
        moment,
        conversionOrderName,
        disabledDate (current) {
            // return current <= moment().startOf('day');
        },
        closeModel () {
            //关闭弹出层
            const closesModel = document.getElementById('closesModel');
            closesModel.addEventListener('click', (e) => {
                this.editSearchtable = false;
                this.editSearchProject = false;
                this.editSearchWarehouse = false;
                this.editSearchLocation = false;
                this.editcrmNameSearch = false;
                this.editSearchProcedure = false;
                this.editSearchProductionLine = false;
                this.editSearchTeam = false;
                this.editofficeSearch = false;
                this.editRequireDate = false;
                this.editRequireTime = false;
                this.editCheckbox = false;
            }, false)
        },
        //==========================默认输入框==========================
        handleInput(e){
            // if(this.col == 'remarks' || this.col == 'batchNo'){
            //     let value = e.target.value;
            //     if(value){
            //         this.value = value
            //     }
            // } else {
                let value = e.target.value;
                //value = value.replace(/[^0-9]/g,'')
                if(value){
                    //this.value = Number(value);
                    this.value = value
                }
            // }
        },

        handleChange (e) {
            // if(this.col == 'remarks' || this.col == 'batchNo'){
            //     let value = e.target.value;
            //     if(value){
            //         this.value = value
            //     }
            // } else {
                let value = e.target.value;
                //value = value.replace(/[^0-9]/g,'')
                if(value){
                    //this.value = Number(value);
                    this.value = value
                }
            // }
        },
        nowColIsNumber () {
            //判断当前字段是否是小数
            this.decimalData = this.dynamicAllData.filter(item => {
                return item.columnType === '小数';
            });

            let isnum = false;
            this.decimalData.forEach(item => {
                if (this.col == item.code) {
                    isnum = true;
                }
            })
            return isnum;
        },
        check () {
            if(this.col == 'remarks' || this.col == 'batchNo'){
                this.$emit("change", this.value);
            } else {
                this.editable = false;
                //判断小数的输入
                // console.log(this.numReg.test(this.value), this.value, this.dynamicAllData);
                let isnum = this.nowColIsNumber();
                if (isnum) {
                    if(this.value){
                        //numRegTemp 允许负数
                        if (this.numReg.test(this.value)) {
                            this.$emit("change", Number(this.value));
                        }else{
                            this.$message.warning(`${this.decimalData[key].name}输入有误！`)
                            this.$emit("change", 0);
                        }
                    }else{
                        this.$emit("change", 0);
                    }
                } else {
                    //（同字段不同表格）不同表格编辑，赋值区分
                    if (this.dataSource[0].tableType) {
                        let backData = {
                            //value: Number(this.value),
                            value: this.value,
                            tableType: 'xgVisible'
                        }
                        this.$emit("change", backData);
                        return false;
                    }
                    //this.$emit("change", Number(this.value));
                    this.$emit("change", this.value);
                }
            }
        },
        //==========================默认输入框==========================




        //==========================物料编码==========================
        archivesCheck (backData) {
            this.editable = false;
            this.editSearchtable = false;
            console.log("archivesCheck_物料编码:", backData);
            if (backData) {
                if (backData.length >= 1) {
                    if (this.col == 'productName' || this.col == 'productCode') {
                        //对应产品名称和编码
                        backData[0].specialGw = true;
                        this.$emit("choiceAddData", backData);
                    } else {
                        this.$emit("choiceAddData", backData);
                    }
                } else {
                    this.$emit("change", backData);

                    if (this.index == this.dataSource.length - 2) {
                        //点击可编辑的最后一行就新增一行
                        this.$emit('newAddData');
                    }
                }
            }
        },
        archivesEnter () {
            //搜索后点击回车
            this.$refs.searchRef.handleEnter();
        },
        archivesData (e) {
            const value = e.target.value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.searchRef.inputVal = value;
                this.$refs.searchRef.getData(1);
            }, 500)
        },
        //==========================物料编码==========================




        //==========================项目编码==========================
        projectData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.projectSearchRef.getData(value);
            }, 500)
        },
        projectEnter () {
            //搜索后点击回车
            this.$refs.projectSearchRef.handleEnter();
        },
        projectCheck (backData) {
            this.editable = false;
            this.editSearchProject = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================项目编码==========================



        //==========================仓库==========================
        warehouseData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.warehouseSearchRef.getData(value);
            }, 500)
        },
        warehouseEnter () {
            //搜索后点击回车
            this.$refs.warehouseSearchRef.handleEnter();
        },
        warehouseCheck (backData) {
            this.editable = false;
            this.editSearchWarehouse = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================仓库==========================



        //==========================货位==========================
        locationData (e) {
            const value = e.target.value;
            // console.log("搜索 货位:",value)
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.locationSearchRef.getData(value);
            }, 500)
        },
        locationEnter () {
            //搜索后点击回车
            this.$refs.locationSearchRef.handleEnter();
        },
        locationCheck (backData) {
            this.editable = false;
            this.editSearchLocation = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================货位==========================



        //==========================工序==========================
        procedureData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.procedureSearchRef.getData(value);
            }, 500)
        },
        procedureEnter () {
            //搜索后点击回车
            this.$refs.procedureSearchRef.handleEnter();
        },
        procedureCheck (backData) {
            this.editable = false;
            this.editSearchProcedure = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================工序==========================


        //==========================班组==========================
        TeamData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.TeamSearchRef.getData(value);
            }, 500)
        },
        TeamEnter () {
            //搜索后点击回车
            this.$refs.TeamSearchRef.handleEnter();
        },
        TeamCheck (backData) {
            this.editable = false;
            this.editSearchTeam = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================班组==========================



        //==========================生产线==========================
        ProductionLineData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.ProductionLineSearchRef.getData(value);
            }, 500)
        },
        ProductionLineEnter () {
            //搜索后点击回车
            this.$refs.ProductionLineSearchRef.handleEnter();
        },
        ProductionLineCheck (backData) {
            this.editable = false;
            this.editSearchProductionLine = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================生产线==========================



        //==========================客户==========================
        crmnameData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.crmNameSearchRef.getData(value);
            }, 500)
        },
        crmnameEnter () {
            //搜索后点击回车
            this.$refs.crmNameSearchRef.handleEnter();
        },
        crmnameCheck (backData) {
            this.editable = false;
            this.editcrmNameSearch = false;
            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================客户==========================



        //==========================车间，部门==========================
        officeData (e) {
            const value = e.target.value;
            // this.value = value;
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.$refs.officeSearchRef.getData(value);
            }, 500)
        },
        officeEnter () {
            //搜索后点击回车
            this.$refs.officeSearchRef.handleEnter();
        },
        officeCheck (backData) {
            this.editable = false;
            this.editofficeSearch = false;

            if (backData) {
                //赋值物料名称
                this.$emit("change", backData);
            }
        },
        //==========================车间，部门==========================








        //==========================辅计量==========================
        unitsChange (id) {
            this.editSubunitTable = false;
            let name = null;
            let unitExchangeRate = null;
            for (const key in this.unitsDataDetails) {
                if (this.unitsDataDetails[key].id == id) {
                    name = this.unitsDataDetails[key].name;
                    unitExchangeRate = this.unitsDataDetails[key].changeRate;
                    this.value = name;

                }
            }
            let backData = {
                id: id,
                name: name,
                unitExchangeRate: unitExchangeRate
            }
            this.$emit("change", backData);
        },
        unitsBlur () {
            this.editSubunitTable = false;
        },
        unitsFocus () {
            // this.$refs.unitRef.open = true;
        },
        //==========================辅计量==========================





        //==========================辅计量数量==========================
        unitNumBlur (e) {
            this.editSubunitNumber = false;
            const value = e.target.value ? e.target.value : null;
            this.value = value;
            this.$emit("change", this.value);
        },
        //==========================辅计量数量==========================




        //========================时间===============================
        blurTime () {
            console.log(111)
        },
        onChange1 (row, time) {
            console.log(row, time)
            this.timeVal = time;
        },
        handleClose () {
            // let time = '';
            //判断当前是否有值
            // if (this.timeVal) {
            //     time = this.timeVal;
            // } else {
            //     let myDate = new Date();
            //     let h = myDate.getHours();       // 获取当前小时数(0-23)
            //     let m = myDate.getMinutes();     // 获取当前分钟数(0-59)
            //     if (h < 10) h = '0' + h;
            //     if (m < 10) m = '0' + m;
            //     time = h + ':' + m
            // }
            let backData = {
                value: this.timeVal,
                columnType: this.columnType
            }

            //区分同字段不同表格
            console.log(this.dataSource[0]);
            //当前在修改表格
            if (this.dataSource[0].tableType) {
                backData.tableType = 'xgVisible';
            }
            setTimeout(() => {
                this.$emit("change", backData);
                this.editRequireTime = false;
            }, 200)

        },
        //========================时间================================




        //==========================日期==========================
        onChangeTime (d, string) {
            this.value = string;
            this.editRequireDate = false;
            let backData = {
                value: string,
                columnType: this.columnType
            }
            //区分同字段不同表格
            //当前在修改表格
            if (this.dataSource[0].tableType) {
                backData.tableType = 'xgVisible';
            }
            if(this.$route.path == '/production/management/productionOrder'){
                this.dataSource[this.index].planEndDate = string
            }
            this.$emit("change", backData);
        },
        onOkTime () {
            this.value = getDate.getCurrentMoment().format('YYYY-MM-DD');
            this.editRequireDate = false;
            let backData = {
                value: this.value,
                columnType: this.columnType
            }
            //区分同字段不同表格
            //当前在修改表格
            if (this.dataSource[0].tableType) {
                backData.tableType = 'xgVisible';
            }
            if(this.$route.path == '/production/management/productionOrder'){
                this.dataSource[this.index].planEndDate = this.value
            }
            this.$emit("change", backData);
        },
        onBlurTime () {
            //移出日期组件
            // setTimeout(() => {
            //   this.editRequireDate = false;
            // }, 200)
        },
        //==========================日期==========================


        //==========================下拉选择==========================
        dropDownChange (key) {
            let backData = {};
            this.editDropDownChoice = false;
            this.valSelect.forEach(element => {
                if (key == element.key) {
                    backData = {
                        id: element.key,
                        name: element.label,
                        columnType: this.columnType
                    }
                }
            });
            this.$emit("change", backData);
        },
        dropDownBlur () {
            this.editDropDownChoice = false;
        },
        dropDownFocus () {
            // this.$refs.unitRef.open = true;
        },
        //==========================下拉选择==========================


        //==========================下拉多选==========================
        dropDownMuch (key) {
            this.editDropDownMuch = false;
            if (key) {
                this.$emit("change", {
                    columnType: this.columnType,
                    key: key.join(',')
                });
            }

        },
        dropDownMuchBlur () {
            this.editDropDownMuch = false;
            if (this.value) {
                this.value = this.value.join(',')
            }
        },
        //==========================下拉多选==========================



        //==========================复选==========================
        onChangeCheckbox (key) {
            this.editCheckbox = false;
            this.$emit("change", { columnType: '复选', val: key.target.checked });
        },
        checkboxBlur () {
            this.editCheckbox = false;
        },
        //==========================复选==========================



        //==========================换算率==========================
        onInputExchange (e) {
            const value = e.target.value;
            this.value = value;
            console.log(this.subUnitData);
        },
        enterExchange (e) {
            this.editExchangeRate = false;
            this.$emit("change", this.value);
        },
        //==========================换算率==========================

        showModal(){
            this.$nextTick(() => {
                let clientDom = this.$refs.officeSearchid.$el.getBoundingClientRect();
                this.$refs.officeSearchRef.changePosition(clientDom.left)
                this.$refs.officeSearchid.focus();
            })
        },
        edit () {
            console.log('col值', this.col, this.index, this.dataSource.length - 1, this.showTotal, this.nowColIsNumber());

            let isnum = this.nowColIsNumber();
            if (isnum && this.value == 0) {
                this.value = 0;
            } 

            for (let index = 0; index < this.dataSource.length; index++) {
                if(this.dataSource[index].sourceVoucherType == "销售订单" && this.col == "inventoryCode"){
                    this.$message.warning('来源单据未销售订单，不能新增行！');
                    return false;
                }
            }

            this.columnTypeFun(this.col);
            if (this.col == 'inventoryName') {
                //如何点击的是物料名称传递值是物料Id
                if (this.findColumnDetails('inventoryId') == 'no') {
                    this.$message.warning('有来源单的单据不能新增明细！');
                    return false;
                }
            } else {
                if (this.findColumnDetails(this.col) == 'no') {
                    console.log('不可编辑哦');
                    if (this.col == 'inventoryCode') {
                        this.$message.warning('有来源单的单据不能新增明细！');
                        return false;
                    }
                    return false;

                };
            }


            if (this.findColumnIsSearch(this.col)) {
                this.searchVal = this.findColumnVal(this.col);
            } else {
                this.searchVal = '';
            }

            if (this.index == this.dataSource.length - 1 && this.showTotal == false) {
                //说明点击的是合计
                console.log('合计', this.showTotal)

                //某些页面不需要合计项限制，允许修改 判断为showTotal字段
                if (this.showTotal == false) {
                    if (this.col == 'wagesPercentage' || this.col == 'qualifiedQuantity' || this.col == 'unqualifiedQuantity' || this.col == 'reworkQuantity' || this.col == 'scrapQuantity' || this.col == 'unqualifiedReason') {
                        this.editable = true;
                        this.$nextTick(() => {
                            this.$refs.focusid.focus();
                        });
                    }
                    if (this.col == 'workDate') {
                        this.editRequireDate = true;
                        this.$nextTick(() => {
                            this.$refs.requireDateRef.focus();
                            this.closeModel();
                        });
                    }
                    if (this.col == 'workBeginTime' || this.col == 'workEndTime') {
                        this.editRequireTime = true;
                        this.$nextTick(() => {
                            this.$refs.requireTimeRef.focus();
                        });
                    }

                    if (this.col == 'workerName') {
                        this.editable = true;
                        this.componentName = 'clubUser';
                        this.$nextTick(() => {
                            this.$refs.searchComponents.showModal();
                        })
                    }
                }
            } else {
                
                if (this.col == 'inventoryCode' || this.col == 'inventoryName' || this.col == 'productName' || this.col == 'productCode') {
                    //物料编码
                    this.editSearchtable = true
                    if (this.col == 'productName' || this.col == 'productCode') {
                        this.defaultCheckType = this.productCheckType;
                    } else {
                        this.defaultCheckType = null;
                    }
                    this.$nextTick(() => {
                        //获取当前点击的输入框距离浏览器的定位信息
                        let clientDom = this.$refs.focusSearchid.$el.getBoundingClientRect();
                        this.$refs.searchRef.changePosition(clientDom);
                        if (this.col == 'productName' || this.col == 'productCode') {
                            this.$refs.searchRef.showDomType = 'radio';
                        }
                        this.$refs.focusSearchid.focus();
                        this.closeModel();
                    });
                } else if (this.col == 'projectCode' || this.col == 'projectName') {
                    //项目
                    this.editSearchProject = true
                    this.$nextTick(() => {
                        //获取当前点击的输入框距离浏览器的定位信息
                        let clientDom = this.$refs.projectSearchid.$el.getBoundingClientRect();
                        this.$refs.projectSearchid.focus();
                        let w = document.body.clientWidth;//当前可视窗口宽度
                        let prosearchBox = this.$refs.projectSearchRef.$el.getBoundingClientRect();
                        if (prosearchBox.right >= w) { //右边溢出处理
                            this.$refs.projectSearchRef.$el.style.right = '0px';
                            this.$refs.projectSearchRef.$el.style.top = (clientDom.top + 32) + 'px';
                        } else {
                            this.$refs.projectSearchRef.changePosition(clientDom);
                        }
                        this.closeModel();
                    });

                } else if (this.col == 'warehouseName' || this.col == 'warehouse') {
                    //仓库
                    // this.$nextTick(() => {
                    //     //获取当前点击的输入框距离浏览器的定位信息
                    //     let clientDom = this.$refs.warehouseSearchid.$el.getBoundingClientRect();
                    //     this.$refs.warehouseSearchid.focus();
                    //     let w = document.body.clientWidth;//当前可视窗口宽度
                    //     let prosearchBox = this.$refs.warehouseSearchRef.$el.getBoundingClientRect();
                    //     if (prosearchBox.right >= w) { //右边溢出处理
                    //         this.$refs.warehouseSearchRef.$el.style.right = '0px';
                    //     } else {
                    //         this.$refs.warehouseSearchRef.changePosition(clientDom);
                    //     }
                    // });


                    // this.editSearchWarehouse = true;
                    // this.$nextTick(() => {
                    //     this.$refs.warehouseSearchid.focus();
                    //     this.closeModel();
                    // });

                    this.editable = true;
                    this.componentName = 'warehouse';
                    this.$nextTick(() => {
                        this.$refs.searchComponents.showModal();
                    })

                } else if (this.col == 'officeName') {
                    //车间，部门
                    this.editofficeSearch = true;
                    this.$nextTick(() => {
                        this.$refs.officeSearchid.focus();
                        this.closeModel();
                    });
                } else if (this.col == 'bomName' || this.col == 'name' || this.col == 'teamName' || this.col == 'officeId' || this.col == 'processRouteName' || this.col == 'procedureName' || this.col == 'invoiceTypeName'
                    || this.col == 'pickingProcedureName' || this.col == 'warehouseName' || this.col == 'processRouteDetal' || this.col == 'crmName' || this.col == 'vendorName' || this.col == 'inventoryCategoryName'
                    || this.col == 'currencyName' || this.col == 'settleName' || this.col == 'bankName' || this.col == 'bankAccount' || this.col == 'workerName') {
                    if (this.col == 'officeId') {
                        //生产订单 部门
                        this.componentName = 'office';
                    } else if (this.col == 'name' || this.col == 'workerName') {
                        // console.log(this.record.officeId);
                        // if (!this.record.officeId) {
                        //     return;
                        // }
                        //派工单 操作工姓名
                        this.componentName = 'clubUser';
                    } else if (this.col == 'bomName') {
                        //bom版本号
                        this.componentName = 'bomVersion';
                    } else if (this.col == 'processRouteDetal') {
                        //派工单 工序明细
                        this.componentName = 'processDetails';
                    } else if (this.col == 'teamName') {
                        //班组
                        this.componentName = 'teamList';
                    } else if (this.col == 'pickingProcedureName') {
                        //明细工序
                        this.componentName = 'gxDetailsKey';
                    } else if (this.col == 'procedureName') {
                        //委外工序
                        if (this.$route.path == '/production/productionProcessReport') {
                            if (this.record.processRouteId == null || !this.record.processRouteId) {
                                this.$message.warning('请先选择工艺路线');
                                return;
                            }
                            //工序汇报单
                            this.componentName = 'procedure';
                        } else {
                            this.componentName = 'process';
                        }

                    } else if (this.col == 'currencyName') {
                        //币种
                        this.componentName = 'currency';
                    } else if (this.col == 'bankName' || this.col == 'bankAccount') {
                        //银行名称
                        this.componentName = 'bank'
                    } else if (this.col == 'warehouseName') {
                        //预出仓库
                        this.componentName = 'warehouseNameKey';
                    } else if (this.col == 'crmName') {
                        console.log(this.dynamicAllData);
                        //客户
                        this.componentName = 'crm';
                    } else if (this.col == 'processRouteName') {
                        //工艺路线
                        this.componentName = 'processRoute';
                    } else if (this.col == 'vendorName') {
                        //供应商
                        this.componentName = 'supplie';
                    } else if (this.col == 'inventoryCategoryName') {
                        //存货分类
                        this.componentName = 'inventoryCategory';
                    } else if (this.col == 'settleId' || this.col == 'settleName') {
                        //结算方式
                        this.componentName = 'clearmethod';
                    } else if (this.col == 'invoiceTypeName') {
                        //发票类型
                        this.componentName = 'invoiceType';
                    }
                    this.editable = true;
                    this.$nextTick(() => {
                        this.$refs.searchComponents.showModal();
                    })
                } else if (this.col == 'inventoryLocationCode' || this.col == 'inventoryLocationName' 
                || this.col == 'inInventoryLocationCode' || this.col == 'inInventoryLocationName'
                || this.col == 'outInventoryLocationCode' || this.col == 'outInventoryLocationName') {
                  
                    //货位
                    this.editSearchLocation = true;
                    this.$nextTick(() => {
                        let warehouseId = "warehouseId";
                        if(this.col == 'inInventoryLocationCode' || this.col == 'inInventoryLocationName'){
                            warehouseId = "inWarehouseId";
                        }else if(this.col == 'outInventoryLocationCode' || this.col == 'outInventoryLocationName'){
                           warehouseId = "outWarehouseId";
                        }
                        let design = this.dynamicFormDataMap.get(warehouseId + "_表头");
                        if(!design)design = this.dynamicFormDataMap.get(warehouseId + "_表尾");
                         console.log("获取到的仓库设计",design,this.dynamicFormDataMap)
                        if(design && design.valueId){
                            this.$refs.locationSearchRef.getData(null,design.valueId);
                        }
                        //获取当前点击的输入框距离浏览器的定位信息
                        let clientDom = this.$refs.locationSearchid.$el.getBoundingClientRect();
                        this.$refs.locationSearchid.focus();
                        let w = document.body.clientWidth;//当前可视窗口宽度
                        let prosearchBox = this.$refs.locationSearchRef.$el.getBoundingClientRect();
                        if (prosearchBox.right >= w) { //右边溢出处理
                            this.$refs.locationSearchRef.$el.style.right = '0px';
                            this.$refs.locationSearchRef.$el.style.top = (clientDom.top + 32) + 'px';
                        } else {
                            this.$refs.locationSearchRef.changePosition(clientDom);
                        }
                        this.closeModel();
                    });
                } else if (this.col == 'workProcedureName') {
                    //工序
                    this.editSearchProcedure = true;
                    console.log(this.$refs.searchProcedureRef);
                    this.$nextTick(() => {
                        //获取当前点击的输入框距离浏览器的定位信息
                        let clientDom = this.$refs.searchProcedureRef.$el.getBoundingClientRect();
                        console.log(clientDom)
                        this.$refs.searchProcedureRef.focus();
                        let w = document.body.clientWidth;//当前可视窗口宽度
                        let prosearchBox = this.$refs.procedureSearchRef.$el.getBoundingClientRect();
                        if (prosearchBox.right >= w) { //右边溢出处理
                            this.$refs.procedureSearchRef.$el.style.right = '0px';
                            this.$refs.procedureSearchRef.$el.style.top = (clientDom.top + 32) + 'px';
                        } else {
                            this.$refs.procedureSearchRef.changePosition(clientDom);
                        }
                        this.closeModel();
                    });
                } else if (this.col == 'productionLineName') {
                    //生产线
                    this.editSearchProductionLine = true;
                    console.log(this.$refs.searchProductionLineRef);
                    this.$nextTick(() => {
                        //获取当前点击的输入框距离浏览器的定位信息
                        let clientDom = this.$refs.searchProductionLineRef.$el.getBoundingClientRect();
                        this.$refs.searchProductionLineRef.focus();
                        let w = document.body.clientWidth;//当前可视窗口宽度
                        let prosearchBox = this.$refs.ProductionLineSearchRef.$el.getBoundingClientRect();
                        if (prosearchBox.right >= w) { //右边溢出处理
                            this.$refs.ProductionLineSearchRef.$el.style.right = '0px';
                            this.$refs.ProductionLineSearchRef.$el.style.top = (clientDom.top + 32) + 'px';
                        } else {
                            this.$refs.ProductionLineSearchRef.changePosition(clientDom);
                        }
                        this.closeModel();
                    });
                } else if (this.columnType == '日期') {
                    console.log('点击了日期')
                    this.editRequireDate = true;
                    this.$nextTick(() => {
                        this.$refs.requireDateRef.focus();
                        this.closeModel();
                    });
                } else if (this.columnType == '复选') {
                    console.log('点击了复选')
                    this.editCheckbox = true;
                } else if (this.columnType == '时间') {
                    console.log('点击了时间')
                    this.editRequireTime = true;
                    this.$nextTick(() => {
                        this.$refs.requireTimeRef.focus();
                    });
                } else if (this.columnType == '下拉选择') {
                    this.editDropDownChoice = true;
                } else if (this.columnType == '下拉多选') {
                    this.editDropDownMuch = true;
                    if (this.value) {
                        this.value = this.value.split(',')
                    }
                    this.$nextTick(() => {
                        this.$refs.dropMuch.focus();
                    });
                } else if (this.col == 'subUnit') {
                    console.log(this.dataSource, this.index);
                    //辅助计量
                    for (let i = 0; i < this.dataSource.length; i++) {
                        if (i == this.index) {
                            if (this.dataSource[i].subUnit) {//subUnit存在值说明是多计量
                                this.unitsAssistSelect = this.returnGroupUnits(this.dataSource[i].unitGroupId);//跟新辅计量下拉数据
                                console.log('this.unitsAssistSelect', this.unitsAssistSelect)
                                //多计量的子集
                                this.editSubunitTable = true;
                                this.$nextTick(() => {
                                    this.$refs.unitRef.focus();
                                });
                            }
                        }
                    }
                } else if (this.col == 'subQuantity') {
                    //辅计量数量
                    for (let i = 0; i < this.dataSource.length; i++) {
                        if (i == this.index) {
                            if (this.dataSource[i].subUnit) {//subUnit存在值说明是多计量
                                //有辅计量   辅计量数量才可以点击
                                this.editSubunitNumber = true;
                                this.$nextTick(() => {
                                    this.$refs.unitNumRef.focus();
                                });
                            }
                        }
                    }
                } else if (this.col == 'unitExchangeRate') {
                    //换算率
                    console.log(this.unitsAssistSelect);

                    for (let i = 0; i < this.dataSource.length; i++) {
                        if (i == this.index) {
                            if (this.dataSource[i].subUnit) {//subUnit存在值说明是多计量
                                this.unitsAssistSelect = this.returnGroupUnits(this.dataSource[i].unitGroupId);//跟新辅计量下拉数据
                            }
                        }
                    }


                    for (let i = 0; i < this.dataSource.length; i++) {
                        if (i == this.index && JSON.stringify(this.unitsAssistSelect) != '[]') {
                            console.log('是否是浮动：', this.dataSource[i], this.unitsAssistSelect, this.unitsAssistSelect[0].convertType);

                            if (this.dataSource[i].subUnit && this.unitsAssistSelect[0].convertType == 1) {//subUnit存在值说明是多计量
                                //有辅计量&&convertType==1浮动   换算率才可以点击
                                this.editExchangeRate = true;
                                this.$nextTick(() => {
                                    this.$refs.exchangeRateRef.focus();
                                });
                            } else {
                                this.$message.warning('该换算类型为固定不可更改')
                            }
                        }
                    }
                } else if (this.col == 'baseUnit' ||
                    this.col == 'amount' ||
                    this.col == 'includeTaxAmount' ||
                    this.col == 'tax' ||
                    this.col == 'commodityAttribute' ||
                    this.col == 'priceTaxTotal'
                ) {
                    //主计量不能输入
                    //金额不能输入
                    //含税金额不能输入
                    //税额不能输入
                    //价税合计不能输入
                    if (this.sourceCode == 'PaymentVoucher'
                        || this.sourceCode == 'OtherPayableVoucher'
                        || this.sourceCode == 'ReceiveVoucher'
                        || this.sourceCode == 'OtherReceivableVoucher') {
                        //付款单，收款单，其他应收单，其他应付单金额可以输入
                        this.editable = true;
                        this.$nextTick(() => {
                            this.$refs.focusid.focus();
                        });
                    } else {
                        return false;
                    }
                } else {
                    this.editable = true;
                    this.$nextTick(() => {
                        this.$refs.focusid.focus();
                    });
                }
            }
        },
        searchBackData (record) {
            this.editable = false;
            if (record) {
                if (record.constructor === Object) {
                    console.log("-----------Editable.vue_searchBackData______22222:", record.name);
                    this.value = record.name;
                    this.$emit("change", record);
                }
            }
        },
        columnTypeFun (code) {
            this.dynamicAllData.forEach(item => {
                if (item.code == code) {
                    if (item.columnType == '下拉选择') {
                        this.valSelect = JSON.parse(item.val);
                    }

                    if (item.columnType == '下拉多选') {
                        this.valSelect = item.val.split(',');
                    }
                    this.columnType = item.columnType;
                }
            })
        },
        //查找字段是否可编辑
        findColumnDetails (code) {
            let isOnEdit = '';
            this.dynamicAllData.forEach(item => {
                if (item.code == code) {
                    console.log(code);
                    console.log(item);
                    if (!item.onEdit) {
                        console.log(item.onEdit);
                        isOnEdit = 'no';
                    } else {
                        isOnEdit = 'yes';
                    }
                }
            })
            return isOnEdit;
        },
        //查找字段是否是搜索 返回val
        findColumnVal (code) {
            let val = '';
            this.dynamicAllData.forEach(item => {
                if (item.code == code) {
                    val = item.val;
                }
            })
            return val;
        },
        //是否是搜索选择
        findColumnIsSearch (code) {
            let isSearch = false;
            this.dynamicAllData.forEach(item => {
                if (item.code == code) {
                    if (item.columnType == '搜索选择') {
                        isSearch = true;
                    }
                }
            })
            return isSearch;
        },
        returnGroupUnits (id) {
            //根据id返回 非主计量的 辅助计量组
            let elementId = null;
            let units = [];
            // this.unitsDataDetails.forEach(element => {
            //     if (id == element.id) {
            //         elementId = element.unitGroupId;
            //     }
            // });
            console.log(this.unitsDataDetails);
            this.unitsDataDetails.forEach(element => {
                if (id == element.unitGroupId && !element.isMainUnit) {
                    units.push(element);
                }
            });
            return units;
        },



        //==========================运算==========================
        detectionSome () {
            //获取当前运算符
            let { numberA, numberB, operational, value, nowOperational, numReg } = this;

            for (let i = 0; i < operational.length; i++) {
                for (let j = 0; j < value.length; j++) {
                    if (operational[i] === value[j]) {
                        nowOperational = operational[i];//当前运算
                    } else {
                        this.value = this.numberEnd;
                    }
                }
            }
            if (nowOperational) {
                numberA = value.split(nowOperational)[0];
                numberB = value.split(nowOperational)[1];

                Object.assign(this, { nowOperational, numberA, numberB });
            }
        },
        calculate () {
            //运算
            this.detectionSome();

            let res = 0;
            let { numberA, numberB, nowOperational } = this;
            numberA = Number(numberA);
            numberB = Number(numberB);
            switch (nowOperational) {
                case "+":
                    res = numberA + numberB;
                    break;
                case "-":
                    res = numberA - numberB;
                    break;
                case "*":
                    res = numberA * numberB;
                    break;
                case "/":
                    res = numberA / numberB;
                    break;
            }
            //清空所有值
            this.numberA = '';
            this.numberB = '';
            this.nowOperational = '';
            this.value = res < 0 || res == NaN ? 0 : res.toFixed(2);
            console.log(this.value)
            this.numberEnd = this.value;
        },
    },
};
</script>
<style lang="less" scoped>
    #closesModel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: rgba(255, 255, 255, 0);
    }
    .editable-cell {
        position: relative;
        width: 100%;
    }
    .editable-cell-input-wrapper {
        padding: 0;
    }
    .editable-cell-text-wrapper {
        padding: 0;
        width: 100%;
        height: 30.2px;
        line-height: 30.2px;
    }

    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        line-height: 18px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
        display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }

    .editable-cell-input-search {
        position: relative;
    }

    .ant-popover-inner {
        border: 1px solid #ccc !important;
    }
    .ant-popover-arrow {
        border-right-color: #ccc !important;
        border-bottom-color: #ccc !important;
    }
</style>